import React, { useState, useEffect } from 'react'
import { Row, Col } from 'antd'
import './btn.scss'
import { BorderBox9, FlylineChart, ScrollBoard,ConicalColumnChart,CapsuleChart } from '@jiaminghi/data-view-react'
export default function Btn() {
  const [a, seta] = useState(0)
  const config = {
    centerPoint: [0.48, 0.35],
    points: [
      {
        position: [0.52, 0.235],
        text: '新乡'
      },
      {
        position: [0.43, 0.29],
        text: '焦作'
      },
      {
        position: [0.59, 0.35],
        text: '开封'
      },
      {
        position: [0.53, 0.47],
        text: '许昌'
      },
      {
        position: [0.45, 0.54],
        text: '平顶山'
      },
      {
        position: [0.36, 0.38],
        text: '洛阳'
      },
      {
        position: [0.62, 0.55],
        text: '周口'
      },
      {
        position: [0.56, 0.56],
        text: '漯河'
      },
      {
        position: [0.37, 0.66],
        text: '南阳'
      },
      {
        position: [0.55, 0.81],
        text: '信阳'
      },
      {
        position: [0.55, 0.67],
        text: '驻马店'
      },
      {
        position: [0.37, 0.29],
        text: '济源'
      },
      {
        position: [0.20, 0.36],
        text: '三门峡'
      },
      {
        position: [0.76, 0.41],
        text: '商丘'
      },
      {
        position: [0.59, 0.18],
        text: '鹤壁'
      },
      {
        position: [0.68, 0.17],
        text: '濮阳'
      },
      {
        position: [0.59, 0.10],
        text: '安阳'
      }
    ],
    bgImgUrl: '/flylineChart/map.jpg',
    centerPointImg: {
      url: '/flylineChart/mapCenterPoint.png'
    },
    pointsImg: {
      url: '/flylineChart/mapPoint.png'
    }
  }
  const table = {
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3']
    ],
    oddRowBGC : 'rgb(0, 23, 54)',
    evenRowBGC : 'rgba(62, 185, 226,0.2)'
  }
  const dat = {data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    '/conicalColumnChart/1st.png',
    '/conicalColumnChart/2st.png',
    '/conicalColumnChart/3st.png',
    '/conicalColumnChart/4st.png',
    '/conicalColumnChart/5st.png',
    '/conicalColumnChart/6st.png',
    '/conicalColumnChart/7st.png'
  ]}
  const boo = {
    data: [
      {
        name: '南阳',
        value: 167
      },
      {
        name: '周口',
        value: 123
      },
      {
        name: '漯河',
        value: 98
      },
      {
        name: '郑州',
        value: 75
      },
      {
        name: '西峡',
        value: 66
      },
    ],
    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
    unit: '单位'
  }
  useEffect(() => {
    seta(1)
    
  })
  
  return (
    <div className='box'>
      <BorderBox9 reverse="{true}" backgroundColor='rgb(0, 23, 54)' key={a} style={{ padding: '10px 15px' }}>

        <Row style={{ height: '40vh'  ,borderRadius : '10px' , overflow : 'hidden' }}>
          <Col span={12} style={{height : '100%' }}>
            <FlylineChart key={a} config={config}  style={{ width: '100%', height: '100%'}} />
          </Col>
          <Col span={12} style={{height : '100%' }}>
            <ScrollBoard key={a+1} config={table} style={{ width: '100%', height: '100%' }} />
          </Col>
        </Row>
        <Row style={{ height: '40vh' }}>
          <Col span={12} key={a+2} style={{height : '100%' }}>
            <ConicalColumnChart config={dat} style={{width: '100%', height: '100%'}} />
          </Col>
          <Col span={12} style={{height : '100%' }}>
            <CapsuleChart key={a+3} config={boo} style={{width:'100%',height:'100%' }} />
          </Col>
        </Row>
      </BorderBox9>
    </div>
  )
}
